<template>
  <div class="left_main flexC">
    <div class="flex1 flexC fuwu">
      <p class="title">
        <img class="verticM" style="height: 1.125rem;padding: 0 1rem;" src="../../assets/img/data/20.png" alt="">
        <span class="colorF font_s18">服务设施（本周待售墓穴、格位）数据 </span>
      </p>
      <div class="flex1 flex content">
        <div class="flex1 flexC" style="padding-left: 0.5rem;">
          <div class="flex1 flex AlignItemsC">
            <img style="height: 3.3125rem;" src="../../assets/img/data/19.png" alt="">
            <div>
              <p class="font_s16 Medium colorF">传统墓</p>
              <p>
                <span class="font_s32" style="color: #5AD834;">16362</span>
                <span class="font_s16" style="color: #9CB750;">（穴）</span>
              </p>
            </div>
          </div>
          <div class="flex1 flex AlignItemsC">
            <img style="height: 3.3125rem;" src="../../assets/img/data/19.png" alt="">
            <div>
              <p class="font_s16 Medium colorF">草坪、花坛、植树葬</p>
               <p>
                <span class="font_s32" style="color: #5AD834;">2961</span>
                <span class="font_s16" style="color: #9CB750;">（穴）</span>
              </p>
            </div>
          </div>
          <div class="flex1 flex AlignItemsC">
            <img style="height: 3.3125rem;" src="../../assets/img/data/19.png" alt="">
            <div>
              <p class="font_s16 Medium colorF">其他墓穴</p>
               <p>
                <span class="font_s32" style="color: #5AD834;">207</span>
                <span class="font_s16" style="color: #9CB750;">（穴）</span>
              </p>
            </div>
          </div>
        </div>
        <div class="flex1 flexC">
          <div class="flex1 flex AlignItemsC">
            <img style="height: 3.3125rem;" src="../../assets/img/data/19.png" alt="">
            <div>
              <p class="font_s16 Medium colorF">壁葬数</p>
               <p>
                <span class="font_s32" style="color: #5AD834;">28391</span>
                <span class="font_s16" style="color: #9CB750;">（穴）</span>
              </p>
            </div>
          </div>
          <div class="flex1 flex AlignItemsC">
            <img style="height: 3.3125rem;" src="../../assets/img/data/19.png" alt="">
            <div>
              <p class="font_s16 Medium colorF">深埋数</p>
               <p>
                <span class="font_s32" style="color: #5AD834;">609</span>
                <span class="font_s16" style="color: #9CB750;">（穴）</span>
              </p>
            </div>
          </div>
          <div class="flex1 flex AlignItemsC">
            <img style="height: 3.3125rem;" src="../../assets/img/data/19.png" alt="">
            <div>
              <p class="font_s16 Medium colorF">寄存格位</p>
               <p>
                <span class="font_s32" style="color: #5AD834;">24026</span>
                <span class="font_s16" style="color: #9CB750;">（格）</span>
              </p>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="flex1 flexC fuwu">
      <p class="title">
        <img class="verticM" style="height: 1.125rem;padding: 0 1rem;" src="../../assets/img/data/20.png" alt="">
        <span class="colorF font_s18">新区各公墓（骨灰堂）土地数据</span>
      </p>
      <div class="flex1 content flex AlignItemsC JustifyContentC">
        <img src="../../assets/img/bigimg/11.png" style="width: 90%; height: 70%;" alt="">

        <!-- <div id="echarts_1"></div> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Left',
  props: {
    msg: String
  },
  mounted () {
    this.echarts_1()
  },
  methods: {
    echarts_1 () {
      let myChart = this.$echarts.init(document.getElementById('echarts_1'))
      // 绘制图表
      myChart.setOption({
        color: ['#9DB851'],
        xAxis: {
          axisLabel: { // 坐标轴的字体颜色
            textStyle: {
              color: '#FFFFFF'
            }
          },
          data: ['界龙古园', '三林静园', '东沟乡静园', '长桥山庄', '天逸静园', '洋泾乡安息堂']
        },
        yAxis: {
          axisLabel: { // 坐标轴的字体颜色
            textStyle: {
              color: '#FFFFFF'
            }
          },
          splitLine: { // 横线显示
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ['#384a64']
            }
          }
        },
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .left_main{
    position: absolute;
    top:25%;
    left:1rem;
    height: 73%;
    width: 25%;
    .fuwu{
      margin-bottom: 1rem;
      .title{
        line-height: 2.75rem;
        border-radius: 5px 5px 0 0;
        background: #556969;
      }
      .content{
        background: #1C1F26;
        img{
          margin-right: 0.3rem
        }
        #echarts_1{
          width: 25rem;
          height: 18.75rem;
          // background: #ff00ff
        }
      }
    }
  }
</style>
